<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色列表</title>
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <link href="../../font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
    <link href="../../css/style.css" rel="stylesheet">
    <link href="../../css/bootstrap-table.css" rel="stylesheet">
    <style type="text/css">
        [v-clock] {
            display: none !important;
        }
    </style>
</head>

<body style="background-color: #f3f3f4;overflow: hidden;" >
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>角色管理</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="index.html">首页</a>
                </li>
                <li>
                    <span>基础设置</span>
                </li>
                <li class="active">
                    <span>角色管理</span>
                </li>
            </ol>
        </div>
    </div>
    <div id="ycapp" v-cloak>

        <!-- 内容 -->
        <div class="gray-bg">

            <div class="wrapper wrapper-content animated fadeInRight">
                <div id="toolbar" class="btn-group">
                    <button id="btn_add" type="button" @click="add" class="btn btn-default">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                    </button>
                    <button id="btn_edit" type="button" @click="editor" class="btn btn-default">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                    </button>
                    <button id="btn_delete" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                    </button>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox ">
                            <div class="ibox-content">
                                <div class="jqGrid_wrapper">
                                    <table class="bootstrap-table" id="table_list"></table>
                                    <div id="pager_list"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Mainly scripts -->
    <script src="../../js/jquery-2.1.1.js"></script>
    <script src="../../js/plugins/layer/layer.js"></script>

    <!-- jqGrid -->
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/bootstrap-table.js"></script>
    <script src="../../js/bootstrap-table-zh-CN.js"></script>

    <script src="../../js/vue.min.js"></script>
    <script src="../../js/common.js"></script>


    <script>
        $(function () {
            var url = baseURL + 'sysRole/page';
            var columns = [{
                checkbox:true
            }, {
                field: 'roleName',
                title: '角色名称',
                align: 'center'
            } , {
                field: 'remark',
                title: '备注',
                align: 'center'
            } ,{
                field: 'createTime',
                title: '创建时间',
                align: 'center',
                formatter: function (value, row, index) {
                    return new Date(value).Format('yyyy-MM-dd HH:mm');
                }
            }];
            $.initTable($("#table_list"),columns,url);
        });

        var vm = new Vue({
            el:'#ycapp',
            data:{
                title:null,
                role:{}
            },
            methods: {
                add: function(){
                    vm.title = "新增";
                    vm.role = {};
                    layer.open({
                        type: 2,
                        area: ['450px', '380px'],
                        shadeClose: true,
                        shade: false,
                        maxmin: true,
                        content: 'roleEdit.html'
                    });
                },
                editor: function(){
                    vm.title = "新增";
                    vm.role = {};
                    var rows = $.getSelections("id");
                    if (rows.length == 0) {
                        $.modalMsg("请选择要编辑的数据", modal_status.WARNING);
                        return;
                    }
                    if (rows.length > 1) {
                        $.modalMsg("请选择要编辑的单条数据", modal_status.WARNING);
                        return;
                    }
                    layer.open({
                        type: 2,
                        area: ['450px', '380px'],
                        shadeClose: true,
                        shade: false,
                        maxmin: true,
                        content: 'roleEdit.html?id='+rows[0]
                    });
                }
            }
        });
    </script>

</body>

</html>
